import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity, ImageBackground } from 'react-native'
import Swiper from 'react-native-swiper'
import screen from '../../common/screen'
import * as api from '../../api'
type Props = {
    navigation:any,
    // onPress: Function,
}

type State = {
    advertisingList: Array,
}
// 在swiper中使用遍历的话，不能循环播放和自动下一个
class Banner extends PureComponent<Props>{


    constructor(){
        super()
        this.state = {
            advertisingList:[],
        }
    }


    componentDidMount(){
        this.requestAdvertisingList();
    }

    requestAdvertisingList = async () => {
        try {
            var parameter = {}
            var list = await api.getAdvertisingList(parameter)

            this.setState({
                advertisingList: list,
                // isASuccess: true,
                // isRefreshing: false ,
            })
        } catch (error) {
            //alert('请求失败，请重试' + error)
            // this.setState({
            //     isASuccess: false,
            //     isRefreshing: false ,
            // })
        }
    }

    onPressItem(id:String){
        console.log(id+"+++++++++++++")
    }


    render() {
        return (
            <View>
                <Swiper style={styles.swiper}
                    dot={<View style={styles.dot} />}
                    activeDot={<View style={styles.activeDot} />}
                    autoplay={true}
                >
                {
                    this.state.advertisingList && this.state.advertisingList.map((info, i) => (
                        <TouchableOpacity style={styles.sliderImg} onPress={() => this.onPressItem(info.id)}
                            key={i}>
                            <ImageBackground style={styles.sliderImg} resizeMode='contain'
                                source={{ uri: info.imageUrl }} >
                                <Image style={styles.background} resizeMode='contain' source={require('../../img/home/bannerbg.png')} />
                            </ImageBackground>
                        </TouchableOpacity>

                    ))
                }
                </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    sliderImg: {
        justifyContent: 'flex-end',
        width: screen.width,
        height: screen.width * 0.5,
    },
    swiper: {
        width: screen.width,
        height: screen.width * 0.5,
    },
    background: {
        width: screen.width,
        height: screen.width * 0.03,
    },
    dot: {
        backgroundColor: '#FFFFFF',
        width: screen.width * 0.017,
        height: screen.width * 0.017,
        borderRadius: 4,
        marginRight: screen.width * 0.033,
    },
    activeDot: {
        backgroundColor: '#FA9D24',
        width: screen.width * 0.017,
        height: screen.width * 0.017,
        borderRadius: 4,
        marginRight: screen.width * 0.033,
    }
})
export default Banner 